<template>
	<view>
		<!-- 商品分类导航条 -->
		<view>
			<uni-tag text="日用品" type="error" :inverted="true" @click="clickDayUse"></uni-tag>
			<uni-tag text="家电" type="error" :inverted="true" @click="clickJiaDian"></uni-tag>
			<uni-tag text="果蔬" type="error" :inverted="true" @click="clickFruit"></uni-tag>
		</view>
		<!-- 商品信息列表 -->
		<!-- 图文卡片模式 -->
		<view v-for="item in shop">
			<uni-card mode="style" :is-shadow="true" :thumbnail="item.imgSrc[0].imgSrc" @click="clickNewShop(item.id)">
				<text class="small">{{item.name}}</text>
				<br />
				<text class="small">{{item.price}}元/件</text>
			</uni-card>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shop: [{
						name: '',
						imgSrc: [{}],
						id: 0,
						weight: 0,
						issueDate: '',
						price: 0,
						number: 0,
					}
				],
			}
		},
		methods: {
			clickDayUse() { //点击“日用品”

			},
			clickJiaDian() { //点击“家电”

			},
			clickFruit() { //点击“果蔬”

			},
			clickNewShop(item){/* 点击商品 ，将id传递过去*/
				uni.navigateTo({
					url:"../shop/shopContent?id="+item,
					success() {
						
					},
				})
			},
		},
		onLoad() {  //页面加载时，从后台服务器取数据
			uni.request({
				url:"http://localhost:8081/shop/selectShopAll",
				success:(res) =>{
					this.shop=res.data.shop;
					console.log(this.shop[0].imgSrc[0].imgSrc);
				}
			})
		}
	}
</script>

<style>
	.small {
		font-size: small;
	}
</style>
